<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.clock {
				width: 400px;
				height: 400px;
				border-radius: 50%;
				background-color: #00FFFF;
				border: red solid 10px;
				position: relative;
			}
			
			.clock span {
				font-size: 20px;
				font-weight: bold;
			}
			
			.clock .num12 {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
			.clock .num3 {
				position: absolute;
				top: 50%;
				right: 0px;
				transform: translateY(-50%);
			}
			.clock .num6 {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
			.clock .num9 {
				position: absolute;
				top: 50%;
				left: 0px;
				transform: translateY(-50%);
			}
			
			.clock div {
				left: 50%;
				top: 50%;
				transform: translateY(-50%);
				position: absolute;
				display: inline-block;
				transform-origin: left;
			}
			
			.clock .shi {
				width: 70px;
				height: 5px;
				background-color: #FF0000;
				transform: rotate(270deg);
			}
			.clock .fen {
				width: 100px;
				height: 3px;
				background-color: black;
				transform: rotate(210deg);
			}
			.clock .miao {
				width: 120px;
				height: 1px;
				background-color: blue;
				transform: rotate(30deg);
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<span class="num12">12</span>
			<span class="num3">3</span>
			<span class="num6">6</span>
			<span class="num9">9</span>
			<div class="shi"></div>
			<div class="fen"></div>
			<div class="miao"></div>
		</div>
	</body>
</html>
